<template>
  <template v-if="columns.length">
    <a-table  @change="handleTableChange"
              :pagination="pagination"
              :dataSource="dataList" :columns="columns">
      <template #bodyCell="{ text}">
        <a-tooltip>
          <template #title>{{ text }}</template>
          <span>{{ text }}</span>
        </a-tooltip>
      </template>
    </a-table>
  </template>
  <template v-else>
    <div class="w-full h-[500px] flex items-center justify-center ">
      <a-spin/>
    </div>
  </template>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {storeToRefs} from "pinia";
import useStat from "../../store/stat.js";
import useQuestion from "../../store/question.js";
import {getQuestionDetail, getQuestionStatListService} from "../../http/api.js";
import {useRoute} from "vue-router";
const {componentList, questionData, activeId} = storeToRefs(useQuestion())
const {dataList,total} = storeToRefs(useStat())
const $route = useRoute()
const pagination = ref({
  current: 1,
  defaultPageSize: 20,
  total: total,
  position: ['bottomCenter'],
  showTotal: () => `共 ${total.value} 条`
})
const handleTableChange = (page) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  getStatData(page.current,page.pageSize)
}
const getStatData = async (current,pageSize) => {
  const {id} = $route.params
  let result = await getQuestionStatListService(id,current,pageSize)
  dataList.value = result.list
  total.value = result.total
}

const getQuestionData = async () => {
  const {id} = $route.params
  let result = await getQuestionDetail(id)
  questionData.value = result
  componentList.value = result.componentList
  activeId.value = result.componentList[0].fe_id
}
let columns = computed(() => {
  let arr = []
  componentList.value.forEach((item) => {
    let title
    if (item?.type === 'questionInfo' || item?.type === 'questionTitle' || item?.type === 'questionParagraph') {
      title = item.title
    } else {
      title = item.props.title
    }
    arr.push({
      dataIndex: item.fe_id,
      title
    })
  })
  return arr
})
onMounted(() => {
  getStatData()
  getQuestionData()
})
</script>
<style scoped>
:deep(.ant-table-cell) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 95px;
}
</style>
